<template>
  <div id="profile">
      <div class="select-bar flex">
          <div class="select">
              搜索:目的地/酒店/景点/航班号
          </div>
          <div class="my">
              <i class="iconfont icon-wode"></i>
              <p>我 的</p>
          </div>
      </div>
      <Scroll class="content" ref="Scroll"
            @scrollPosition="scrollPosition"
            :probe-type="3"
            :pull-up-load="true"
      >
        <ProfileSwiper class="banner" :banners="HomeData.banners"  @swiperImgLoad="swiperImgLoad"/>
        <nav class="nav flex">
            <div class="nav-item flex">
                <div class="icon"></div>
                <div >景点玩乐</div>
            </div>
            <div class="nav-item flex">
                <div class="icon"></div>
                <div >景点玩乐</div>
            </div>
            <div class="nav-item flex">
                <div class="icon"></div>
                <div >景点玩乐</div>
            </div>
            <div class="nav-item flex">
                <div class="icon"></div>
                <div >景点玩乐</div>
            </div>
            <div class="nav-item flex">
                <div class="icon"></div>
                <div >景点玩乐</div>
            </div>
        </nav>
        <mainNav class="main-nav flex">
            <div class="main-nav-item flex">
                <div class="chil-item">
                    <p>酒店</p>
                </div>
                <div class="chil-item">
                    <div class="chil-item-chil">海外酒店</div>
                    <div class="chil-item-chil">特价酒店</div>
                </div>
                <div class="chil-item">
                    <div class="chil-item-chil">团购</div>
                    <div class="chil-item-chil">民宿客栈</div>
                </div>
            </div>
                  <div class="main-nav-item flex">
                <div class="chil-item">
                    <p>酒店</p>
                </div>
                <div class="chil-item">
                    <div class="chil-item-chil">海外酒店</div>
                    <div class="chil-item-chil">特价酒店</div>
                </div>
                <div class="chil-item">
                    <div class="chil-item-chil">团购</div>
                    <div class="chil-item-chil">民宿客栈</div>
                </div>
            </div> 
             <div class="main-nav-item flex">
                <div class="chil-item">
                    <p>酒店</p>
                </div>
                <div class="chil-item">
                    <div class="chil-item-chil">海外酒店</div>
                    <div class="chil-item-chil">特价酒店</div>
                </div>
                <div class="chil-item">
                    <div class="chil-item-chil">团购</div>
                    <div class="chil-item-chil">民宿客栈</div>
                </div>
            </div>
        </mainNav>
      </Scroll>    
  </div>
</template>

<script>
    import ProfileSwiper from "./childComp/ProfileSwiper";
    import Scroll from "../../components/common/scroll/Scroll";
    import {HomeData,getGoods} from "../../network/home";

    export default {
        name: "Profile",
        components: {
            ProfileSwiper,
            Scroll,
        },
        // mixins:[BackTopMixIn],
        data() {
            return {
                HomeData: {},
                goodType:'pop',
                TabControlOffsetTop:0,
                flag:false,
                saveY:0,
            }
        },
        created() {
            /**
             * 获取数据
             * */
            this.HomeData = HomeData();
        },

        destroyed(){
            console.log('home destoryed');
        },
        activated(){
            // console.log('home activated');
            this.$refs.Scroll.scrollTo(0,this.saveY,0)
            // 最好做一次刷新
            this.$refs.Scroll.refresh()
        },
        methods:{


            scrollPosition(position){
                this.IsShow = -(position.y)>500 ? true : false
                this.flag = -(position.y)>this.TabControlOffsetTop ? true : false
            },
            getMore(){
                this.getHomeGoods(this.goodType)
                // console.log("加载更多");
                this.$refs.Scroll.finishPullUp()
                this.$refs.Scroll.refresh
            },
            TabControlSetTop(){
                // console.log(this.$refs.tabControl.$el.offsetTop);
                //获取TabControl 的 OffsetTop
                //所有的组件都有一个属性 $el
                this.TabControlOffsetTop = this.$refs.tabControl.$el.offsetTop
            },
            swiperImgLoad(){
                debounce(this.$refs.Scroll.refresh,100)
                this.TabControlSetTop()
            },
            featureViewLoad(){
                this.$refs.Scroll.refresh
            }
        }
    }

</script>

<style scoped>
    @import url("//at.alicdn.com/t/font_3302463_5tish86jpaq.css");


    .main-nav{
        border-radius: 5px;
        height: 268px;
        margin: 3px 5px;
        border: 1px solid #fff;
        flex-direction: column;
        box-sizing: border-box;
    }

    .main-nav .main-nav-item{
        flex: 1;
        height: 88px;
        color: #fff;
        box-sizing: border-box;
    }

    .main-nav .main-nav-item:nth-child(1){
        background-color: bisque;
        border-radius: 10px 10px 0 0;
    }
    .main-nav .main-nav-item:nth-child(2){
        background-color: salmon;
    }
    .main-nav .main-nav-item:nth-child(3){
        background-color: saddlebrown;
        border-radius: 0 0 10px 10px ;

    }


    .main-nav .main-nav-item .chil-item{
        flex: 1;
        text-align: center;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
    }
    .main-nav .main-nav-item .chil-item p{
        margin-top: 1em;
    }

    .main-nav .main-nav-item:nth-child(2){
        border-top : 3px solid #fff ;
        border-bottom : 3px solid #fff ;
        
    }
    .main-nav .main-nav-item .chil-item:nth-child(2){
        border-left : 1px solid #fff ;
        border-right : 1px solid #fff ;
    }
    .main-nav .main-nav-item .chil-item .chil-item-chil{
        flex: 1;
        height: 44px;
        line-height: 44px;
    }
    .main-nav .main-nav-item .chil-item .chil-item-chil:nth-child(1){
        border-bottom: 1px solid #fff;
    }

   

    .select-bar{
        background-color: rgb(238, 238, 238);
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
    .select-bar .select{
        flex: 1;
        margin: 10px 0px 10px 10px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.521);
        border-radius: 5px;
        position: relative;
        line-height: 30px;
        height: 30px;
        text-indent: 2em;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    .select-bar .select::before{
        content: "";
        background: url("/img/common/bn_srh_1.png") no-repeat;
        background-size: 18px auto;
        position: absolute;
        top: 5px;
        left: 5px;
        width: 16px;
        height: 16px;
        
    }

    .select-bar .my{
        width: 44px;
        height: 44px;
        text-align: center;
        padding: 0 8px;
        color: rgb(0, 17, 255);
    }
    .select-bar .my .iconfont{
        font-size: 26px;

    }
    .select-bar .my p{
        font-size: 12px;
    }

    .banner{
        height: 100px;
    }
    .nav{
        height: 80px;
        margin: 3px 5px;
        border-radius: 5px;
        background-color: #fff;
    }
    .nav .nav-item{
        flex :1;
        flex-direction: column;
        /* 侧轴居中对齐 因为是单行 没换行 */
        align-items: center;

    }
    .nav .nav-item .icon{
        background: url("/img/common/anony_nav_logo@2x.png") no-repeat;
        width: 30px;
        height: 30px;
        margin-top: 12px;
        margin-bottom: 2px;
    }
    .nav .nav-item div{
        flex: 1;
    }

    .item{
        height: 600px;
    }
    .content{
        background-color: rgb(237, 240, 240);
        position: absolute;
        top: 44px;
        left: 0;
        right: 0;
        bottom: 49px;
    }
  
    
    
</style>

